<template>
	<view class="index_box">
		<view class="index_header_lyn">
			<uni-icons type="bars" size="30"></uni-icons>
			<uni-easyinput prefixIcon="search" v-model="seaech.kw" placeholder="请输入歌名" class="search_lyn" trim="both"
				@iconClick="searchFn(seaech.kw)" search  @confirm="searchFn(seaech.kw)">
			</uni-easyinput>

			<uni-icons type="headphones" size="30"></uni-icons>
		</view>
		<view class="">
			<mySwiper></mySwiper>
		</view>
		<view class="">
			<mySwiper2></mySwiper2>
		</view>
		<view class="tuijian_box">
			<h3 class="tuijian">推荐歌单</h3>
			<swiper class="swiper_list" :display-multiple-items="3">
				<swiper-item class="swiper_list_item" v-for="item in listData" :key="item.list_id"
					@click="listFn(`${item.list_id}`)">
					<tuiJian>
						<template v-slot:img>
							<img :src="item.list_headUrl" style="width: 220rpx;height: 220rpx;border-radius: 25rpx;"
								alt="">
						</template>
						<template v-slot:p_name>
							<p>{{item.list_name}}</p>
						</template>
					</tuiJian>
				</swiper-item>
			</swiper>


		</view>
		<view class="rege_box">
			<h3 class="rege">年度热歌</h3>
			<reGe v-for="item in songData" :key="item.song_id" @click="songFn(`${item.song_id}`)">
				<template v-slot:songImg>
					<img :src="item.song_headUrl"
						style="width: 120rpx;height: 120rpx;border-radius: 15rpx;margin-right: 25rpx;" alt="">
				</template>
				<template v-slot:song_info>
					<h4 class="song_name">{{item.songName}}</h4>
					<p class="song_sing">{{item.singer}}</p>
				</template>
			</reGe>
		</view>

		<keep-alive>
			<playMusic v-if="mid" :songId="songId" :key="songId"/>
		</keep-alive>
	</view>
</template>

<script lang="ts">
	import mySwiper from '@/components/index/mySwiper.vue';
	import mySwiper2 from '@/components/index/myswiper2.vue';
	import tuiJian from '@/components/index/tuijian.vue';
	import reGe from '@/components/index/rege.vue';
	import playMusic from '@/components/playMusic.vue';
	export default {
		data() {
			return {
				seaech: {
					kw: ''
				},
				sss: { borderRadious: 50, color: 'rgb(255,255,255)' },
				listData: null,
				songData: null,
				mid: false,
				songId: '',
			};
		},


		mounted() {
			this.getData()
		},
		components: { mySwiper, mySwiper2, tuiJian, reGe, playMusic },
		methods: {
			getData() {
				uni.request({
					url: 'api/indexApp',
					success: (res : any) => {
						//console.log(this);
						this.listData = res.data.data.list;
						this.songData = res.data.data.song;

					},
					fail: (error) => {
						console.log(error);
					}
				});
			},
			searchFn(kw : any) {
				this.seaech.kw = kw;
				uni.request({
					url:'api/searchApp',
					data:{
						kw:kw,
					},
					success:(res:any)=>{
						let ss = res.data.song;
						if(ss.length!=0){
							uni.navigateTo({
								url: `/pages/index/lyric/lyric?song_id=${ss[0].song_id}&song_url=${ss[0].songUrl}`
							})
						}else{
							uni.navigateTo({
								url:'/pages/index/noSong/noSong'
							})
						}
					}
					
				})
				console.log(kw);
			},

			listFn(list_id : string) {
				uni.navigateTo({
					url: `/pages/index/listSong/listSong?list_id=${list_id}`
				})
			},
			songFn(song_id : string) {

				this.mid = true;
				this.songId = song_id;
				//console.log(this.songId);
			}
		},

	}
</script>

<style lang="scss">
	.index_box {
		background-color: white;
		overflow: hidden;
		padding-top: 30rpx;
		.index_header_lyn {
			display: flex;
			align-items: center;
			margin: 20rpx 25rpx;

			.search_lyn {
				margin: 0 35rpx;
			}
		}

		.tuijian_box {

			.tuijian {
				//font-size: 24rpx;
				margin: 0 25rpx;
				font-weight: 600;
			}

			.swiper_list {
				height: 400rpx;
			}
		}

		.rege_box {
			margin-bottom: 100rpx;

			.rege {
				margin-left: 25rpx;

			}

			.song_sing {
				font-size: 12rpx;
			}
		}
	}
</style>